<template>
  <div>
    <div class="flex-al box">
      <div class="text-left">
        <build-el-h1 name="获奖查询.png" type="1"></build-el-h1>
      </div>
      <el-input
        placeholder="请输入姓名"
        v-model="name"
        size="medium"
        clearable
        style="margin-bottom:20px"
      ></el-input>
      <el-input
        placeholder="请输入档案编号"
        v-model="code"
        size="medium"
        clearable
        style="margin-bottom:20px"
      ></el-input>
      <p class="warn-p" v-if="dataObj&&!dataObj.data">{{dataObj.content}}</p>
      <p class="success-p" v-if="dataObj&&dataObj.data">恭喜您，获奖有效！</p>

      <el-button type="primary" style="width:100%;margin-bottom:40px" @click="chaxun">查询</el-button>
      <van-image
        v-if="advertisingImg"
        width="100%"
        height="175px"
        style="border-radius:6px;overflow: hidden;margin-bottom:40px;"
        fit="cover"
        :src="advertisingImg"
        @click="handUrl"
      />
      <div class="text-left">
        <build-el-h1 name="专家培训证书查询.png" type="1"></build-el-h1>
      </div>
      <el-input
        placeholder="请输入姓名"
        v-model="form.licensee"
        size="medium"
        clearable
        style="margin-bottom:20px"
      ></el-input>
      <el-input
        placeholder="请输入证书编号"
        v-model="form.number"
        size="medium"
        clearable
        style="margin-bottom:20px"
      ></el-input>
      <!-- <p class="warn-p" v-if="dataObj&&!dataObj.data">{{dataObj.content}}</p> -->
      <div v-if="chekRes!==''&&chekRes!==null">
        <van-image
          width="100%"
          height="80px"
          style="border-radius:6px;overflow: hidden;margin-bottom:40px;"
          fit="cover"
          :src="chekRes.imgUrl"
          @click="handImgBig(chekRes.imgUrl)"
        />
      </div>
      <div class="warn-p" v-if="chekRes===null">未查询到您输入的姓名和证书编号 请检查输入是否正确</div>
      <el-button type="primary" style="width:100%;margin-bottom:40px" @click="chaxun2">查询</el-button>
    </div>
  </div>
</template>
<script>
import buildElH1 from '../build-el-h1'
import { ImagePreview } from 'vant'
export default {
  components: {
    buildElH1,
  },
  data() {
    return {
      name: '',
      code: '',
      dataObj: null,
      advertisingImg: '',
      imgSrc: '',
      form: { licensee: '', number: '' },
      chekRes: '',
    }
  },
  async mounted() {
    let res = await this.api.search({ category: 12 })
    if (res.length != 0) {
      this.advertisingImg = res[0].imgUrl
      this.imgSrc = res[0].imgSrc
    }
  },
  methods: {
    handImgBig(imgUrl) {
      ImagePreview([imgUrl])
    },
    handUrl() {
      if (this.imgSrc) {
        window.open(this.imgSrc)
      }
    },
    async chaxun() {
      let dataObj = await this.api.verification(this.name, this.code)
      this.dataObj = dataObj
      console.log(dataObj)
    },
    async chaxun2() {
      let res = await this.api.findCertificate(this.form)
      console.log(res, '查询证书')
      this.$toast('查询成功')
      this.chekRes = res
    },
  },
}
</script>
<style lang="less" scoped>
.box {
  padding: 0 30px;
  margin-top: 45px;
  box-sizing: border-box;
  .chek-res {
    text-align: center;
    color: #bf2c3b;
    font-size: 13px;
    margin-bottom: 20px;
  }
  .text-left {
    text-align: left;
    width: 100%;
  }
  .warn-p {
    font-size: 14px;
    color: #0050a5;
    margin-bottom: 20px;
    text-align: center;
  }
  .success-p {
    font-size: 14px;
    color: green;
    margin-bottom: 20px;
  }
}
</style>